<template>
  <div class="home">
    <!-- <transition-group name="drag" class="list" tag="ul">
      <li
        @dragstart.self="dragstart(index)"
        @dragenter.self="dragenter($event, index)"
        @dragover.prevent
        :draggable="true"
        v-for="(item, index) in list"
        :key="item.label"
        :id="index"
        class="list-item"
      >
        {{ item.label }}
      </li>
    </transition-group> -->
    <img class="home-bg" src="@/assets/images/welcome.png" alt="welcome" />
    <!-- <div class="moduleCard">
      <div class="moduleCard__item" v-for="item in moduleList" :key="item">
        <div class="moduleCard__item__con">
          <div class="moduleName">{{ item.name }}</div>
        </div>
        <div class="moduleCard__item__footer">
          <div class="moduleMenus">
            <div class="moduleMenu" v-for="val in item.menus" :key="val.label">{{ val.label }}</div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup lang="ts" name="home">
// import { ref } from "vue";
// const moduleList = ref([
//   {
//     name: "发卡中心",
//     menus: [
//       {
//         label: "组织机构"
//       },
//       {
//         label: "人员管理"
//       },
//       {
//         label: "虚拟卡"
//       }
//     ]
//   },
//   {
//     name: "门禁",
//     menus: [
//       {
//         label: "控制"
//       },
//       {
//         label: "授权"
//       },
//       {
//         label: "查询"
//       }
//     ]
//   },
//   {
//     name: "梯控",
//     menus: [
//       {
//         label: "控制"
//       },
//       {
//         label: "授权"
//       },
//       {
//         label: "查询"
//       }
//     ]
//   },
//   {
//     name: "智能锁",
//     menus: [
//       {
//         label: "控制"
//       },
//       {
//         label: "授权"
//       },
//       {
//         label: "查询"
//       }
//     ]
//   }
// ]);
// const list = ref([
//   { label: "列表1" },
//   { label: "列表2" },
//   { label: "列表3" },
//   { label: "列表4" },
//   { label: "列表5" },
//   { label: "列表6" }
// ]);
// const dragIndex = ref(0);

// function dragstart(index: number) {
//   dragIndex.value = index;
// }
// function dragenter(e: any, index: any) {
//   // 避免源对象触发自身的dragenter事件
//   if (dragIndex.value !== index) {
//     const moving = list.value[dragIndex.value];
//     list.value.splice(dragIndex.value, 1);
//     list.value.splice(index, 0, moving);
//     // 排序变化后目标对象的索引变成源对象的索引
//     dragIndex.value = index;
//   }
// }
</script>

<style scoped lang="scss">
@import "./index.scss";
.list {
  list-style: none;
  .drag-move {
    transition: transform 0.3s;
  }
  .list-item {
    width: 300px;
    height: 50px;
    margin-bottom: 6px;
    line-height: 50px;
    color: #ffffff;
    text-align: center;
    cursor: move;
    background: #ea6e59;
    border-radius: 4px;
  }
}
</style>
